<template>
  <div class="c-table-component">
    <div>
      <a-form ref="form2" :form="form2">
        <a-form-item required label="as">
          <a-input allow-clear v-model="form2.str" />
        </a-form-item>
        <a-button type="primary" @click="handleSearch1"> Search </a-button>
      </a-form>
    </div>
    <div class="c-input-box">
      <div id="components-form-demo-advanced-search">
        <a-form
          class="ant-advanced-search-form"
          :form="form1"
          @submit="handleSearch"
        >
          <a-row :gutter="24">
            <a-col :span="8">
              <a-form-item :label="`Field`">
                <a-date-picker
                  show-time
                  v-decorator="[
                    'field1',
                    {
                      rules: [
                        {
                          required: true,
                          message: 'Please select date!',
                        },
                      ],
                    },
                  ]"
                  type="date"
                  style="width: 100%"
                />
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item :label="`Field`">
                <a-select
                  v-decorator="[
                    'field2',
                    {
                      rules: [
                        {
                          required: true,
                          message: 'Please select your country!',
                        },
                      ],
                    },
                  ]"
                >
                  <a-select-option value="china"> China </a-select-option>
                  <a-select-option value="usa"> U.S.A </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item
                :label="`Field`"
                validate-status="error"
                help="Should be combination of numbers & alphabets"
              >
                <a-input
                  allow-clear
                  v-decorator="[
                    `field3`,
                    {
                      rules: [
                        {
                          required: true,
                          message: 'Input something!',
                        },
                      ],
                    },
                  ]"
                />
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item :label="`Field`">
                <a-input
                  v-decorator="[
                    `field4`,
                    {
                      rules: [
                        {
                          required: true,
                          message: 'Input something!',
                        },
                      ],
                    },
                  ]"
                />
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item :label="`Field`">
                <a-input
                  v-decorator="[
                    `field5`,
                    {
                      rules: [
                        {
                          required: true,
                          message: 'Input something!',
                        },
                      ],
                    },
                  ]"
                />
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item :label="`Field`">
                <a-input
                  v-decorator="[
                    `field6`,
                    {
                      rules: [
                        {
                          required: true,
                          message: 'Input something!',
                        },
                      ],
                    },
                  ]"
                />
              </a-form-item>
            </a-col>
            <a-col :span="10">
              <a-form-item :label="`Field`">
                <a-range-picker
                  :disabled-date="disabledDate"
                  :disabled-time="disabledRangeTime"
                  :show-time="{
                    hideDisabledOptions: true,
                    defaultValue: [
                      moment('00:00:00', 'HH:mm:ss'),
                      moment('11:59:59', 'HH:mm:ss'),
                    ],
                  }"
                  v-decorator="[
                    `field7`,
                    {
                      rules: [
                        {
                          required: true,
                          message: 'Input something!',
                        },
                      ],
                    },
                  ]"
                  format="YYYY-MM-DD HH:mm:ss"
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="24" :style="{ textAlign: 'right' }">
              <a-button type="primary" html-type="submit"> Search </a-button>
              <a-button :style="{ marginLeft: '8px' }" @click="handleReset">
                Clear
              </a-button>
              <!-- <a :style="{ marginLeft: '8px', fontSize: '12px' }" @click="toggle">
            Collapse <a-icon :type="expand ? 'up' : 'down'" />
          </a> -->
            </a-col>
          </a-row>
        </a-form>
      </div>
    </div>
    <div class="c-table-box">
      <a-table
        :columns="columns"
        tableLayout="auto"
        :data-source="data"
        bordered
        :pagination="{
          position: 'bottom',
          showSizeChanger: true,
          showQuickJumper: true,
        }"
      >
        <template
          v-for="col in ['name', 'age', 'address']"
          :slot="col"
          slot-scope="text, record"
        >
          <div :key="col">
            <a-input
              v-if="record.editable"
              style="margin: -5px 0"
              :value="text"
              @change="(e) => handleChange(e.target.value, record.key, col)"
            />
            <template v-else>
              {{ text }}
            </template>
          </div>
        </template>
        <template slot="operation" slot-scope="text, record">
          <div class="editable-row-operations">
            <span v-if="record.editable">
              <a @click="() => save(record.key)">Save</a>
              <a-popconfirm
                title="Sure to cancel?"
                @confirm="() => cancel(record.key)"
              >
                <a>Cancel</a>
              </a-popconfirm>
            </span>
            <span v-else>
              <a :disabled="editingKey !== ''" @click="() => edit(record.key)"
                >Edit</a
              >
            </span>
          </div>
        </template>
      </a-table>
    </div>
    <div class="c-table-ajax">
      <ajaxTable></ajaxTable>
    </div>
    <!-- <div class="c-tree">
      <cTree></cTree>
    </div> -->
  </div>
</template>
<script>
import moment from "moment";
import ajaxTable from "./ajaxTable.vue";
// import cTree from "@/components/tree/index.vue";
const columns = [
  {
    title: "name",
    dataIndex: "name",
    align: "center",
    width: "25%",
    scopedSlots: { customRender: "name" },
  },
  {
    title: "age",
    dataIndex: "age",
    width: "15%",
    scopedSlots: { customRender: "age" },
  },
  {
    title: "address",
    dataIndex: "address",
    width: "40%",
    scopedSlots: { customRender: "address" },
  },
  {
    title: "operation",
    dataIndex: "operation",
    // fixed: 'right',
    scopedSlots: { customRender: "operation" },
  },
];

const data = [];
for (let i = 0; i < 100; i++) {
  data.push({
    key: i.toString(),
    name: `Edrward ${i}`,
    age: 32,
    address: `London Park no. ${i}`,
  });
}

export default {
  components: { ajaxTable },
  computed: {
    count() {
      return this.expand ? 11 : 7;
    },
  },
  data() {
    this.cacheData = data.map((item) => ({ ...item }));
    return {
      data,
      columns,
      editingKey: "",
      str: "",
      form2: {
        str: "",
      },
      expand: false,
      form1: this.$form.createForm(this, { name: "advanced_search" }),
      form: this.$form.createForm(this, { name: "advanced_search" }),
    };
  },
  methods: {
    moment,
    range(start, end) {
      const result = [];
      for (let i = start; i < end; i++) {
        result.push(i);
      }
      return result;
    },
    handleSearch1(e) {
      e.preventDefault();
      console.log(e, this.form2);
      this.$refs.form2.validateFields((error, value) => {
        console.log(error, value);
      });
    },
    disabledDate(current) {
      // Can not select days before today and today
      return current && current < moment().endOf("day");
    },

    disabledDateTime() {
      return {
        disabledHours: () => this.range(0, 24).splice(4, 20),
        disabledMinutes: () => this.range(30, 60),
        disabledSeconds: () => [55, 56],
      };
    },

    disabledRangeTime(_, type) {
      if (type === "start") {
        return {
          disabledHours: () => this.range(0, 60).splice(4, 20),
          disabledMinutes: () => this.range(30, 60),
          disabledSeconds: () => [55, 56],
        };
      }
      return {
        disabledHours: () => this.range(0, 60).splice(20, 4),
        disabledMinutes: () => this.range(0, 31),
        disabledSeconds: () => [55, 56],
      };
    },
    handleChange(value, key, column) {
      const newData = [...this.data];
      const target = newData.filter((item) => key === item.key)[0];
      if (target) {
        target[column] = value;
        this.data = newData;
      }
    },
    edit(key) {
      const newData = [...this.data];
      const target = newData.filter((item) => key === item.key)[0];
      this.editingKey = key;
      if (target) {
        target.editable = true;
        this.data = newData;
      }
    },
    save(key) {
      const newData = [...this.data];
      const newCacheData = [...this.cacheData];
      const target = newData.filter((item) => key === item.key)[0];
      const targetCache = newCacheData.filter((item) => key === item.key)[0];
      if (target && targetCache) {
        delete target.editable;
        this.data = newData;
        Object.assign(targetCache, target);
        this.cacheData = newCacheData;
      }
      this.editingKey = "";
    },
    cancel(key) {
      const newData = [...this.data];
      const target = newData.filter((item) => key === item.key)[0];
      this.editingKey = "";
      if (target) {
        Object.assign(
          target,
          this.cacheData.filter((item) => key === item.key)[0]
        );
        delete target.editable;
        this.data = newData;
      }
    },
    handleSearch(e) {
      e.preventDefault();
      this.form1.validateFields((error, values) => {
        console.log("error", error);
        console.log("Received values of form: ", values);
        console.log(moment(values.field1._d).format("YYYY-MM-DD HH:mm:ss"));
      });
    },

    handleReset() {
      this.form.resetFields();
    },

    toggle() {
      this.expand = !this.expand;
    },
  },
  mounted() {
    console.log(this.form1, this.$refs.form2);
  },
};
</script>
<style lang="scss">
.c-table-component {
  overflow: auto;
  .c-table-box {
    margin-top: 10px;
  }
}
.ant-advanced-search-form .ant-form-item {
  display: flex;
  .ant-form-item-control-wrapper {
    flex: 1;
  }
}
</style>
